<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../s/element-ui/2.13.2/theme-chalk/index.css">
<title>MessageBox 弹框</title>
</head>
<body>
	<div id="app">
		<h3>消息提示</h3>
		<el-button plain="text" @click="open1">点击打开 Message Box</el-button>

		<h3>确认消息</h3>
		<el-button plain="text" @click="open2">点击打开 Message Box</el-button>

		<h3>提交内容</h3>
		<el-button plain="text" @click="open3">点击打开 Message Box</el-button>
	</div>
	<script src="../../s/vue/2.7.16/vue.min.js"></script>
	<script src="../../s/element-ui/2.13.2/index.js"></script>
	<script>
		new Vue({
			el : '#app',
			methods : {
				open1 : function() {
					this.$alert('这是一段内容', '标题名称', {
						confirmButtonText : '确定',
						callback : function(action) {
							this.$message({
								type : 'info',
								message : 'action: ' + action
							});
						}
					});
				},
				open2 : function() {
					var me = this;
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText : '确定',
						cancelButtonText : '取消',
						type : 'warning'
					})['then'](function() {
						me.$message({
							type : 'success',
							message : '删除成功!'
						});
					})['catch'](function() {
						me.$message({
							type : 'info',
							message : '删除取消'
						});
					});
				},
				open3 : function() {
					var me = this;
					this.$prompt('请输入邮箱', '提示', {
						confirmButtonText : '确定',
						cancelButtonText : '取消',
						//也可以使用 inputValidator 函数来判断 返回布尔值或字符串
						inputPattern : /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
						inputErrorMessage : '邮箱格式不正确'
					})['then'](function() {
						me.$message({
							type : 'success',
							message : '你的邮箱是: ' + value
						});
					})['catch'](function() {
						me.$message({
							type : 'info',
							message : '取消输入'
						});
					});
				}
			}
		})
	</script>
</body>
</html>